import { Component } from "inferno";
import ListView from "./ListView";
import IconListItem from "./ui/IconListItem";
import TextListItem from "./ui/TextListItem";
import Separator from "./ui/Separator";
import { startDM } from "./utils";
import farooqlogo from "./farooqlogo.png";
import adrianavatar from "./adrianavatar.png";

const FarID = "@farooqkz:synod.im";

class About extends Component {
  handleKeyDown = (evt) => {
    if (evt.key === "Call" || evt.key === "c") {
      const room = window.mClient
        .getVisibleRooms()
        .filter((room) => room.guessDMUserId() === FarID);
      if (room.length === 0) {
        console.log("Starting DM with Farooq...");
        startDM(window.mClient, FarID);
      } else {
        this.openRoom(room[0].roomId);
      }
    }
  };

  constructor(props) {
    super(props);
    this.softKeyRef = props.softKeyRef;
    this.openRoom = props.openRoom;
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  componentDidMount() {
    this.softKeyRef.current.setState({
      centerText: "Repo.",
      leftText: "Quit",
      rightText: "Donate",
    });
    this.softKeyRef.current.centerCb = () => {
      window.open("https://notabug.org/bananaphone/marooq", "_self");
    };
    this.softKeyRef.current.leftCb = () => {
      window.close();
    };
    this.softKeyRef.current.rightCb = () => {
      window.open("https://far.chickenkiller.com/pages/donate", "_self");
    };

    document.addEventListener("keydown", this.handleKeyDown);
  }

  render() {
    return (
      <ListView cursor={0} $HasNonKeyedChildren>
        <IconListItem
          primary="Code"
          secondary="Farooq Karimi Zadeh"
          iconSrc={farooqlogo}
        />
        <Separator text="Press call to contact via Matrix" />
        <IconListItem
          primary="KaiUI"
          secondary="Adrian Machado"
          iconSrc={adrianavatar}
        />
        <TextListItem primary="Matrix JS SDK" secondary="Matrix Foundation?" />
      </ListView>
    );
  }
}

export default About;
